import { fileURLToPath, URL } from 'node:url'
// import postcsspxtoviewport from 'postcss-px-to-viewport'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
    open: true
  },

  // css: {
  //   postcss: {
  //     plugins: [
  //       postcsspxtoviewport({
  //         unitToConvert: 'px', // 需要转换的单位，默认为"px"
  //         viewportWidth: 375, //  设计稿的视口宽度
  //         unitPrecision: 5, // 单位转换后保留的精度
  //         propList: ['*'], // 能转化为vw的属性列表
  //         viewportUnit: 'vw', //  希望使用的视口单位
  //         fontViewportUnit: 'vw', // 字体使用的视口单位
  //         selectorBlackList: [], // 需要忽略的CSS选择器 '.el','el'
  //         minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
  //         mediaQuery: false, // 媒体查询里的单位是否需要转换单位
  //         replace: true, // 是否直接更换属性值，而不添加备用属性
  //         exclude: [
  //           /node_modules/,
  //           /\/views\/home\//,
  //           /\/components\/screen\//,
  //           /\/assets\/images\//
  //         ], // 忽略某些文件夹下的文件或特定文件
  //         landscape: false // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  //       })
  //     ]
  //   }
  // },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()]
    }),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
